<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="../js/echarts.min.js"></script>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>

<body>
<div id="main" style="height:400px"></div>
<script type="text/javascript">
              var  myChart = echarts.init(document.getElementById('main'));
              var arr1=[],arr2=[];
              function arrTest(){
                $.ajax({
				  
                  type:"post",
                  url:"echart.php",
                  dataType:"json",
				  async:false,
				  data:{},
                  success:function(result){
					
                    if (result){
                      for (var i = 0; i < result.length; i++) {
                          arr1.push(result[i].name);
                          arr2.push(result[i].num);
                      }
                    }
                  },
				error:function(errorMsg) {
					alert("数据读取失败");
				}	
              	})
				return arr1,arr2;
			  }
              arrTest();
				console.log(arr1[0]);
              var  option = {
                    tooltip: {
                        show: true
                    },
                    legend: {
                       data:['num']
                    },
                    xAxis : [
                        {
                            type : 'category',
                            data : arr1
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            "name":"num",
                            "type":"bar",
                            "data":arr2
                        }
                    ]
                };

                myChart.setOption(option);
   
    </script>
</body>
</html>
